<template>
  <div class="app-container">
    <div class="filter-container filter1">
      <el-input v-model="listQuery.time" placeholder="年份" style="width: 100px;" class="filter-item" />
<!--      <el-select v-model="listQuery.workshop" placeholder="请选择">-->
<!--        <el-option-->
<!--          v-for="item in options"-->
<!--          :key="item.value"-->
<!--          :label="item.label"-->
<!--          :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search">
        搜索
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      element-loading-text="Loading"
      height="900"
      style="width: 100%"
    >
      <el-table-column fixed label="月份" align="center" prop="month">
        <template slot-scope="scope">
          {{ scope.row.month }}
        </template>
      </el-table-column>
      <el-table-column label="设备总台数" align="center" prop="deviceTotal">
        <template slot-scope="scope">
          {{ scope.row.deviceTotal }}
        </template>
      </el-table-column>
      <el-table-column label="设备完好数" align="center" prop="deviceIntactNum">
        <template slot-scope="scope">
          {{ scope.row.deviceIntactNum }}
        </template>
      </el-table-column>
<!--      <el-table-column label="实际开动台数" align="center" prop="actualRunNum">-->
<!--        <template slot-scope="scope">-->
<!--          {{ scope.row.actualRunNum }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="计划运转时间(分钟)" align="center" prop="planRunTime">
        <template slot-scope="scope">
          {{ scope.row.planRunTime }}
        </template>
      </el-table-column>
      <el-table-column label="实际运转时间(分钟)" align="center" prop="actualRunNum">
        <template slot-scope="scope">
          {{ scope.row.actualRunTime }}
        </template>
      </el-table-column>
      <el-table-column label="故障停机时间(分钟)" align="center" prop="malfunctionTime">
        <template slot-scope="scope">
          {{ scope.row.malfunctionTime }}
        </template>
      </el-table-column>
      <el-table-column label="其他原因停机时间(分钟)" align="center" prop="stopTime">
        <template slot-scope="scope">
          {{ scope.row.stopTime }}
        </template>
      </el-table-column>
      <el-table-column label="设备利用率" align="center" prop="deviceUseRate">
        <template slot-scope="scope">
          {{ (scope.row.deviceUseRate!="")?scope.row.deviceUseRate:0 }}%
        </template>
      </el-table-column>
      <el-table-column label="设备完好率" align="center" prop="deviceIntactRate">
        <template slot-scope="scope">
          {{ (scope.row.deviceIntactRate!="")?scope.row.deviceIntactRate:0 }}%
        </template>
      </el-table-column>
      <el-table-column label="故障停机率" align="center" prop="deviceMalfunctionRate">
        <template slot-scope="scope">
          {{ (scope.row.deviceMalfunctionRate!="")?scope.row.deviceMalfunctionRate:0 }}%
        </template>
      </el-table-column>
      <el-table-column label="OEE平均值" align="center" prop="OeeAverage">
        <template slot-scope="scope">
          {{ scope.row.oeeAverage }}%
        </template>
      </el-table-column>
    </el-table>
<!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

  </div>
</template>
<style>
  *{font-size: 12px;}
</style>
<script>
import { deviceOee0 } from '@/api/deviceOee'
import Pagination from '@/components/Pagination'
export default {
  name: 'DeviceOEE0',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [
        {
          month: '1月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '2月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '3月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '4月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '5月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '6月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '7月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '8月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '9月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '10月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '11月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        },
        {
          month: '12月',
          deviceTotal: 121,
          deviceIntactNum: 100,
          actualRunNum: 100,
          planRunTime: 480,
          actualRunTime: 470,
          malfunctionTime: 10,
          stopTime: 2,
          deviceUseRate: 90,
          deviceIntactRate: 90,
          deviceMalfunctionRate: 70,
          deviceStopRate: 10,
          OeeAverage: 67
        }
      ],
      listLoading: false,
      total: 1,
      options: [{
        value: 'chilun',
        label: '车轮车间'
      }, {
        value: 'weld',
        label: '焊接车间'
      }],
      listQuery: {
        page: 1,
        limit: 10,
        time: '2019'
      },
      value: new Date()
    }
  },
  created() {
    this.getList()
    console.log('---' + this.list)
  },
  methods: {
    getList() {
      // 这一句是把时间转化为定的时间字符串 2019-09
      // this.listQuery.month = this.listQuery.month.getFullYear() + '-' + Number(this.listQuery.month.getMonth() + 1)
      this.listLoading = true
      deviceOee0(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>
